<template>
	<div class="seckill-details-basic-info">
		<div class="basicinfo-con1">
			<!--名称-->
			<h4 class="prod-title">{{title}}</h4>
			<!-- 价格 -->
			<!-- prod-price-wrap -->
			<div class="prod-price-wrap display_flex">
				<div class="prod-price">
					<span class="yang-pic">￥</span>
					<span class="yang-pic-price">
						<em class="big-price">{{price}}</em>
						<em class="small-price">.00</em>
					</span>
				</div>
				<div class="prod-price-depreciate">
					<div class="prod-price-depreciate-ellipsis">已省 <span>￥{{discount}}</span></div>
					<div class="free-shipping" v-if="shipping">全国包邮</div>
				</div>
			</div>
			<!-- end prod-price-wrap -->
		</div> 
		<div class="sale display_flex">
			<div>已售 <span>{{selled}}</span>件</div>
			<div class="sale-stock">(库存还剩下<span>{{stock}}</span>件)</div>
		</div>	
	</div>
	
</template>

<script type="text/javascript">

	export default {
		data:function(){
			return{
				title:'曼秀雷敦男士男士冰爽控油醒肤控油肤',
				price:298, 
				discount:98, //优惠
				shipping:true,
				selled:250, //已售
				stock:20, //库存
			}
		}
	}

</script>

<style lang="scss" scoped>

	@import '../../assets/css/_variables.scss';
	@import '../../assets/css/_functions.scss';
	
	.seckill-details-basic-info {
		padding-top: $_defaultFont / 2;
		background: $_fff;
		font-size: $_defaultFont - 7;
		border-top: 1px solid #c8c7cc;
		.basicinfo-con1 {
			padding: 0 $_defaultFont / 4 * 3 + 1;
			h4 {
				font-size: rem(16);
				color: $_243742;
				line-height: rem(24);
			}
			.prod-price-wrap {
				font-size: rem(20);
				line-height: rem(36);
				justify-content: space-between; 
				.prod-price {
					color: $_fe3824;
					width: rem(90);
				}
				.yang-pic,.small-price {
					font-size: rem(14);
				}
				.prod-price-depreciate {
					display: flex;
					font-size: rem(12);
					color: #999;
					.prod-price-depreciate-ellipsis {
						margin-right: rem(140);
						height: rem(16);
						line-height: rem(12);
						padding: rem(2);
						border-radius: rem(2);
						margin-top: rem(10);
						background: $_ff6600;
						color: $_fff;
					}
					.free-shipping {
						background: $_ff6600;
						color: $_fff;
						height: rem(14);
						line-height: rem(12);
						margin-top: rem(10);
						font-size: rem(10);
						padding: 0 rem(2);
					}
				}
				.place-order {
					@include hlh(18px);
					color: $_ff6600;
					font-size: rem(10);
					border-radius: rem(2);
					border: 1px solid $_ff6600;
					padding: 0 rem(2);
					margin-left: rem(4);
					margin-top: rem(10);
				}
			}
		}
		.sale {
			margin-left: rem(16);	
			border-top: 1px solid $_eee;
			line-height: rem(36);
			color: $_999;
			span {
				color: $_ff6600;
				padding: 0 rem(4);
			}
			.sale-stock {
				padding-left: rem(10);
			}
		}
	}
</style>